<template>
   <div class="search">
    <header>
      <a @click="back">
        <van-icon name="arrow-left" size="0.32rem" color="#999999"/>
      </a>
      <img src="/img/Ke_img/形状3.png" alt="" class="search">
      <input v-model="name" type="text" placeholder="输入搜索内容">
      <button @click="btn(),show=false">搜索</button>
    </header>
    <h3 id="hottitle">热门搜索</h3>
    <div class="hotsearch">
        <a @click="gofamily" v-for="(item,index) in typelist" :key="index">{{item}}</a>
    </div>
    <h3 id="lawyertitle">精选律师</h3>
    <div class="hotlawyer">
        <a v-show="show" @click="goLawyer(item.id)" class="listnews" v-for="(item,index) in list" :key="index">
            <img :src="item.url" alt="">
            <div class="list">
                <h3>{{item.name}}</h3>
                <p>{{item.lawOffice}}</p>
                <span>￥{{item.likenumInt}}</span><b><i>{{item.servePeopleNumber}}</i>人咨询</b>
            </div>
            <a class="talk"><img src="/img/Ke_img/私聊.png" alt=""></a>
        </a>
        <a  class="listnews" @click="goLawyer(item.id)" v-for="item in searchlist" :key="item.id">
            <img :src="item.url" alt="">
            <div class="list">
                <h3>{{item.name}}</h3>
                <p>{{item.lawOffice}}</p>
                <span>￥{{item.likenumInt}}</span><b><i>{{item.servePeopleNumber}}</i>人咨询</b>
            </div>
            <a class="talk"><img src="/img/Ke_img/私聊.png" alt=""></a>
        </a>
    </div>
   </div>
</template>

<script>

import { mapState,mapActions } from 'vuex'
import axios from "axios"
export default {
    data() {
        return {
            searchlist:[],
            name:"",
            show:true,
            typelist:[
                "家庭婚姻","借款借贷","综合咨询","交通事故","刑事辩护",
                "劳动纠纷","房产纠纷","合同纠纷","劳动工伤","土地纠纷",
                "离婚","侵权","消费权益","医疗纠纷","法律顾问",
                "经济犯罪","公司事物","行政诉讼","工伤赔偿","借钱不还",
            ],
            lawyerlist:[
                /* {id:"",url:"",name:"张三",company:"啥啥啥律师会所",price:"68",peopleNum:"1342"},
                {id:"",url:"",name:"李四",company:"哈哈哈律师会所",price:"99",peopleNum:"1442"}, */
            ]
        }
    },
    created() {
         
    },
    
    methods: {
      ...mapActions('ke',['init']),
      ...mapActions('ke',['searchlawyer']),

      back() {
        // 返回
        this.$router.push("/home/index")
      },
      goLawyer(id){
        this.$router.push("/home/index/lawyer")
      },
      gofamily(){
        this.$router.push("/home/index/family")
      },
      btn(){
          console.log(this.name);
        axios({
             method:"get",
             url:`http://43.142.77.25:8002/lawyer/lawyer/findLawyerListByLikeName?name=${this.name}`,
         }).then((res)=>{
             console.log(res.data);
             this.searchlist=res.data
         })
      }
    },
    mounted() {
        this.init()
    },
    computed:{
        ...mapState('ke',['list']),
    }
}
</script>

<style scoped>
.search{
   display: flex;
   flex-direction: column;
   overflow: hidden;
}
header{
    height: .7rem;
    line-height: .7rem;
   width: 100%;
   margin-right: 0;
   display: flex;
   position: relative;
   background-color: #EFEFEF;
}
header input{
   width: 5.54rem;
   height: 0.62rem;
   padding-left:.61rem;
   font-size: .24rem;
   font-family: PingFang SC;
   font-weight: 400;
   color: #999999;
   margin-left: .15rem;
}
header img{
   width: 0.17rem;
   height: 0.17rem;
}
header .search{
   position: absolute;
   width:0.29rem;
   height: 0.29rem;
   left: .8rem;
   top: 0.23rem;
}
header button{
    border: none;
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-left: .1rem;
}
#hottitle{
    width: 1.6rem;
    height: .33rem;
    font-size: .34rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    margin: .36rem;
}
/* 热门搜索 */
.hotsearch{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-left: .3rem;
}
.hotsearch a{
    width: 2.16rem;
    height: .29rem;
    font-size: .3rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: .48rem;
    margin: .1rem 0;
    margin-right: 1.3rem;
}
#lawyertitle{
    width: 1.6rem;
    height: .33rem;
    font-size: .34rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    margin: .36rem;
}
/* 精选律师 */
.hotlawyer{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.hotlawyer .listnews{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 2.0rem;
    border-bottom: 1px solid;
    padding:0 .4rem;
}
.hotlawyer .listnews img{
    width:1.8rem;
    height: 1.8rem;
    margin-top: .1rem;
}
.hotlawyer .listnews .list{
    flex: 1;
    margin-left: .2rem;
    margin-top: .4rem;
}
.hotlawyer .listnews .list h3{
    font-size: .28rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
}
.hotlawyer .listnews .list p{
    font-size: .22rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
}
.hotlawyer .listnews .list span{
    font-size: .26rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #CD2121;
}
.hotlawyer .listnews .list b{
    font-size:.2rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-left: .5rem;
}
.hotlawyer .listnews .list i{
    font-style:normal;
}
.hotlawyer .talk{
    height: .59rem;
    width: 1.13rem;
    margin-top: .7rem;
}
.hotlawyer .talk img{
    height: .59rem;
    width: 1.13rem;
}
</style>